<template>
    <div class="box">
        <h3>单文件组件的注意事项</h3>
        <p>1.template标签用于构建组件模板，文件中必须定一个组件模板结果【template or render函数】</p>
        <img src="../../assets/02.png" alt="" srcset="">
        <p>2.单文件组件只能存在一个模板</p>
        <img src="../../assets/01.png" alt="">
        <p>3.单文件组件可以不定义script标签【vue-loader读取单文件组件时，如果没有默认导出项，会使用默认值】;</p>
        <p>4.单文件组件的配置定义，必须描述为当前文件的script标签的export default 导出配置;一个文件只能有一个export default;</p>
        <p>5.单文件组件的script标签内部定义的，export default 外部定义的JS代码为当前组件的环境代码;这部分代码在组件加载时就会执行;</p>
        <input type="button" value="打印组件局部环境变量" @click="printArg()">
        <p>6.单文件只能定义一个script脚本;</p>
        <img src="../../assets/03.png" alt="" srcset="">
        <p>7.单文件组件可以定义style描述样式，语法等同于CSS语法;也可以不定义style;</p>
        <p>8.单文件组件可以定义多个style样式;</p>
    </div>
</template>
<!-- <template>
    <h3>单文件组件的注意事项2</h3>
</template> -->

<!-- <script>
var b = 2;
console.log(b);
</script> -->

<script>
var a = 1;
console.log(a)

// export default {
//     name:"MyComp"
// }
export default {
    name:"MyComp",
    methods: {
        printArg() {
            console.log(a)
        }
    },
}
</script>

<!-- <style>
p{
    background-color: #dedede;
}
</style> -->
<style scoped>
.box{
    padding: 10px;
}
img{
    width: 700px;
    display: block;
}
</style>